<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="模块ID" prop="distributionFrameId">
        <el-input
          v-model="queryParams.distributionFrameId"
          placeholder="请输入模块ID"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="所属机柜" prop="machineCabinet">
        <el-select
          v-model="queryParams.machineCabinet"
          placeholder="请选择所属机柜"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in machineCabinetOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模块类型" prop="distributionFrameType">
        <el-select
          v-model="queryParams.distributionFrameType"
          placeholder="请选择模块类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in frameTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:frame:add']"
        >
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:frame:import']"
        >
          导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:frame:export']"
        >
          导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- <el-row :gutter="20" class="mb10">
      <el-col>
        <div class="colStyle">
          <div class="resNum">查询结果：({{ total }}条)</div>
          <div
            v-for="(item, index) in searchFormOptions"
            :key="index"
            class="searchBox"
          >
            <div class="text">
              {{ item.tableName }}：{{ item.conditionName }}{{ item.textVal }}
            </div>
            <div class="icon" @click="removeSearch(index)">
              <i class="el-icon-error"></i>
            </div>
          </div>
          <el-button
            type="warning"
            round
            size="mini"
            class="ml10 h28"
            @click="cleanAllSearch"
          >
            清除条件
          </el-button>
          <el-button
            type="primary"
            round
            size="mini"
            class="h28"
            icon="el-icon-plus"
            @click="openAddModel"
          >
            追加条件
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb10 mt20" v-if="addShow">
      <el-col :span="4">
        <el-select
          v-model="searchOptions.fieldName"
          placeholder="请选择追加字段"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in fieldNameOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="searchOptions.condition"
          placeholder="请选择条件"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in conditionOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchOptions.val"
          placeholder="请输入条件的值"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addSearch"
        >
          追加
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" size="small" @click="closeAddModel">
          取消
        </el-button>
      </el-col>
    </el-row> -->

    <el-table
      v-loading="loading"
      :data="frameList"
      @cell-click="toClick"
      @sort-change="tableSortChg"
    >
      <el-table-column label="#" align="center" prop="id" width="55">
        <template slot-scope="scope">
          <span
            >{{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="配线模块ID"
        align="center"
        prop="distributionFrameId"
        sortable="custom"
      />
      <el-table-column label="所属机柜" align="center" prop="machineCabinet">
        <template slot-scope="scope">
          <span
            class="showDetailCell font-blue"
            @click.stop="lookCabinet(scope.row)"
          >
            {{ machineCabinetMatter(scope.row) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="配线模块类型"
        align="center"
        prop="distributionFrameType"
        :formatter="distributionFrameTypeMatter"
      />
      <el-table-column label="端口" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.portLine }}×{{ scope.row.portColumn }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.stop="handleUpdate(scope.row)"
            v-hasPermi="['system:frame:edit']"
          >
            修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="!scope.row.updateFlag"
            @click.stop="openLine(scope.row)"
          >
            线路管理
          </el-button>
          <el-button
            size="mini"
            type="text"
            style="color: red"
            @click.stop="createPort(scope.row)"
            v-if="scope.row.updateFlag"
          >
            生成端口表
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改配线模块对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      :width="getDialogWidth()"
      append-to-body
      @closed="clearFiles"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="5">
            <div
              style="
                max-height: 45vh;
                overflow-y: auto;
                border-right: #dcdfe6 solid 1px;
              "
            >
              <el-upload
                :headers="upload.headers"
                :file-list="fileList"
                :action="field101Action"
                :before-upload="imgUpload"
                :on-success="imgFileSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                list-type="picture-card"
                accept="image/*"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="19">
            <el-col :span="12">
              <el-form-item label="配线模块ID" prop="distributionFrameId">
                <el-input
                  v-model="form.distributionFrameId"
                  placeholder="请输入配线模块ID"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属机柜" prop="machineCabinet">
                <el-select
                  v-model="form.machineCabinet"
                  placeholder="请选择所属机柜"
                  filterable
                >
                  <el-option
                    v-for="dict in machineCabinetOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="配线模块类型" prop="distributionFrameType">
                <el-select
                  v-model="form.distributionFrameType"
                  placeholder="请选择配线模块类型"
                >
                  <el-option
                    v-for="dict in frameTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-col :span="9">
                <el-form-item label="端口" prop="portLine">
                  <div style="display: flex">
                    <el-input
                      v-model="form.portLine"
                      placeholder="请输入端口行"
                      style="margin-right: 10px"
                      @input="changePortline"
                    />
                    行
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="portColumn" label-width="10px">
                  <div style="display: flex">
                    <el-input
                      v-model="form.portColumn"
                      placeholder="请输入端口列"
                      style="margin-right: 10px"
                      @input="changePortcolumn"
                    />
                    列
                  </div>
                </el-form-item>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="配线模块ID" prop="distributionFrameId">
              <el-input
                v-model="form.distributionFrameId"
                placeholder="请输入配线模块ID"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属机柜" prop="machineCabinet">
              <el-select
                v-model="form.machineCabinet"
                placeholder="请选择所属机柜"
              >
                <el-option
                  v-for="dict in machineCabinetOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="配线模块类型" prop="distributionFrameType">
              <el-select
                v-model="form.distributionFrameType"
                placeholder="请选择配线模块类型"
              >
                <el-option
                  v-for="dict in frameTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="端口" prop="portLine">
              <div style="display: flex;">
                <el-input
                  v-model="form.portLine"
                  placeholder="请输入端口行"
                  style="margin-right: 10px;"
                  :disabled="getbool(form.portGroupData)"
                />
                行
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="portColumn" label-width="10px">
              <div style="display: flex;">
                <el-input
                  v-model="form.portColumn"
                  placeholder="请输入端口列"
                  style="margin-right: 10px;"
                  :disabled="getbool(form.portGroupData)"
                />
                列
              </div>
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- 此处开始修改的lmk -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          plain
          @click="handleDelete"
          v-if="title == '修改配线模块'"
          v-hasPermi="['system:frame:remove']"
          >删 除</el-button
        >
        <el-button @click="cancel">取 消</el-button>
        <el-button
          v-if="!isChange"
          type="primary"
          style="width: 120px"
          @click="submitForm"
          >确 定</el-button
        >
        <el-button
          v-if="isChange "
          type="primary"
          style="width: 120px"
          @click="openDialog"
          >确 定</el-button
        >
      </div>

      <!-- 显示提示，判断是否修改  lmk-->
      <el-dialog
        title="重要提示"
        :visible.sync="dialogShow"
        width="30%"
        append-to-body
        center
      >
        <span>系统发现您对配线模块的“行x列”数进行了修改，点击【确定】则当前的线路管理数据将会被重置，是否继续？</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelDailog">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- ********修改结束**** -->
    </el-dialog>

    <!-- 配线模块导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!--        <div class="el-upload__tip" slot="tip">-->
        <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备属性数据-->
        <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
        <!--        </div>-->
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
          <el-link type="info" style="font-size: 12px" @click="importTemplate">
            下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 线路管理 -->
    <el-dialog
      @close="getList"
      :title="lineTitle"
      v-if="lineOpen"
      :visible.sync="lineOpen"
      width="98%"
      append-to-body
    >
      <linePage :frameData="frameData"></linePage>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-dialog
      title="查看机柜"
      v-if="lookCabinetOpen"
      :visible.sync="lookCabinetOpen"
      :width="getDialogWidth()"
      append-to-body
    >
      <cabinetDetail :id="selectCabinetId"></cabinetDetail>
    </el-dialog>
  </div>
</template>


<script>
import cabinetDetail from "@/views/dialogDetail/cabinet.vue";
import {
  listFrame,
  getFrame,
  delFrame,
  addFrame,
  updateFrame,
  exportFrame,
  getMachineCabinetOptions,
  importTemplate,
  createPortGroup,
} from "@/api/distributionframe/frame";
import { dictList } from "@/api/machinecabinet/cabinet";
import { getToken } from "@/utils/auth";
import linePage from "@/views/linemanagement/index.vue";


export default {
  name: "Frame",
  components: { linePage, cabinetDetail },
  data() {
    return {
      oldPortline: null,
      oldPortcolumn: null, 
      isChange: false, 
      dialogShow: false, 
      frameData: null,
      lineTitle: "",
      lineOpen: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 配线模块表格数据
      frameList: [],
      //所属机柜
      machineCabinetOptions: [],
      //配线模块类型
      frameTypeOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //追加条件的select参数
      fieldNameOptions: [],
      conditionOptions: [],
      addShow: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        distributionFrameId: null,
        machineCabinet: null,
        distributionFrameType: null,
        portLine: null,
        portColumn: null,
        fillDept: null,
        fillBy: null,
        orderby: null,
      },
      searchOptions: {
        fieldName: "",
        condition: "",
        val: "",
      },
      searchFormOptions: [],
      // 文件上传
      field101Action: process.env.VUE_APP_BASE_API + "/common/upload",
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        distributionFrameId: [
          { required: true, message: "请输入配线模块ID", trigger: "change" },
        ],
        machineCabinet: [
          { required: true, message: "请选择所属机柜", trigger: "change" },
        ],
        distributionFrameType: [
          { required: true, message: "请选择配线模块类型", trigger: "change" },
        ],
        portLine: [
          { required: true, message: "请输入端口行", trigger: "change" },
        ],
        portColumn: [
          { required: true, message: "请输入端口列", trigger: "change" },
        ],
      },
      // 机房导入参数
      upload: {
        // 是否显示弹出层（配线模块数据导入）
        open: false,
        // 弹出层标题（配线模块数据导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/frame/importData",
      },
      lookCabinetOpen: false,
      selectCabinetId: null,
    };
  },
  mounted() {
    if (this.$route.query.frameId) {
      this.queryParams.distributionFrameId = decodeURIComponent(
        JSON.parse(JSON.stringify(this.$route.query)).frameId
      );
      this.handleQuery();
    } else {
      this.getList();
    }
  },
  created() {
    dictList().then((res) => {
      this.machineCabinetOptions = res.data;
    });
    //配线模块类型
    this.getDicts("frame_type").then((response) => {
      this.frameTypeOptions = response.data;
    });
    this.getDicts("operation").then((response) => {
      this.conditionOptions = response.data;
    });
    this.getDicts("distribution_frame_condition").then((response) => {
      this.fieldNameOptions = response.data;
    });
  },
  activated() {
    if (this.$route.query.frameId) {
      this.queryParams.distributionFrameId = decodeURIComponent(
        JSON.parse(JSON.stringify(this.$route.query)).frameId
      );
      this.handleQuery();
    } else {
      this.getList();
    }
    dictList().then((res) => {
      this.machineCabinetOptions = res.data;
    });
    //配线模块类型
    this.getDicts("frame_type").then((response) => {
      this.frameTypeOptions = response.data;
    });
    this.getDicts("operation").then((response) => {
      this.conditionOptions = response.data;
    });
    this.getDicts("distribution_frame_condition").then((response) => {
      this.fieldNameOptions = response.data;
    });
  },
  methods: {
    changePortline(val) {
      if (this.title == '添加配线模块') {
        this.isChange = false
        return
      }
      
      if (val == this.oldPortline) {
        this.isChange = false
      }
      else {
        this.isChange = true
      }
    },
    changePortcolumn(val){
      if (this.title == '添加配线模块') {
        this.isChange = false
        return
      }

      if (val == this.oldPortcolumn) {
        this.isChange = false
      }
      else {
        this.isChange = true
      }
    },
    openDialog() {
      this.dialogShow = true;
    },
    tableSortChg(params) {
      this.queryParams.orderby =
        params.prop + " " + params.order.replace("ending", "");
      this.getList();
    },
    getbool(str) {
      if (str) return true;
      else return false;
    },
    stopC(e) {
      if (e && e.stopPropagation) {
        e.stopPropagation;
      } else {
        window.event.cancelBubble;
      }
    },
    toClick(row) {
      this.handleUpdate(row);
    },
    lookCabinet(row) {
      this.selectCabinetId = row.machineCabinet;
      this.lookCabinetOpen = true;
    },
    createTable(line, col) {
      // 生成空白表格
      let no = 1;
      let arr = [];
      for (let l = 0; l < line; l++) {
        let colList = [];
        for (let c = 0; c < col; c++) {
          colList.push({
            id: no,
            text: "",
            open: true,
            icon: "",
            textClass: "",
            show: true,
            colSpan: 1,
            group: [no],
            groupAll: this.guid(),
          });
          no++;
        }
        arr.push(colList);
      }
      return arr;
    },
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    createPort(row) {
      let obj = { ...row };
      obj.portGroupData = JSON.stringify(
        this.createTable(obj.portLine, obj.portColumn)
      );

      updateFrame(obj).then((response) => {
        this.msgSuccess("端口生成成功");
        this.getList();
      });
      // createPortGroup(id).then(res=>{
      //   this.msgSuccess('端口生成成功')
      //   this.getList()
      // })
    },
    distributionFrameTypeMatter(row, column) {
      return this.selectDictLabel(
        this.frameTypeOptions,
        row.distributionFrameType
      );
    },
    machineCabinetMatter(row, column) {
      return this.selectDictLabel(
        this.machineCabinetOptions,
        row.machineCabinet
      );
    },
    openLine(row) {
      console.log(row);
      this.frameData = row;
      this.lineOpen = true;
      this.lineTitle = row.distributionFrameId + " 配线模块";
    },
    /** 查询配线模块列表 */
    getList() {
      this.loading = true;
      let form = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        orderby: this.queryParams.orderby,
        queryData: [],
      };
      for (let i in this.searchFormOptions) {
        form.queryData.push({
          fieldName: this.searchFormOptions[i].fieldName
            .replace(/([A-Z])/g, "_$1")
            .toLowerCase(),
          condition: this.searchFormOptions[i].condition,
          val: this.searchFormOptions[i].val || "",
        });
      }
      listFrame(form).then((response) => {
        this.frameList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //追加条件操作
    openAddModel() {
      this.addShow = true;
    },
    closeAddModel() {
      this.addShow = false;
      this.searchOptions.fieldName = "";
      this.searchOptions.condition = "";
      this.searchOptions.val = "";
    },
    removeSearch(i) {
      if (this.queryParams[this.searchFormOptions[i].fieldName]) {
        this.queryParams[this.searchFormOptions[i].fieldName] = "";
      }
      this.searchFormOptions.splice(i, 1);
      this.getList();
    },
    addSearch() {
      if (
        !this.searchOptions.fieldName ||
        !this.searchOptions.condition ||
        !this.searchOptions.val
      ) {
        this.msgError("请填写完整搜索条件");
        return;
      }
      let obj = { ...this.searchOptions };
      obj.tableName = this.selectDictLabel(
        this.fieldNameOptions,
        obj.fieldName
      );
      obj.conditionName = this.selectDictLabel(
        this.conditionOptions,
        obj.condition
      );
      obj.textVal = obj.val;
      this.searchFormOptions.push(obj);
      this.closeAddModel();
      this.getList();
    },
    cleanAllSearch() {
      this.searchFormOptions = [];
      this.resetQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // lmk新增 取消内层dailog
    cancelDailog() {
      this.dialogShow = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        distributionFrameId: null,
        machineCabinet: null,
        distributionFrameType: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;

      this.searchFormOptions = this.searchFormOptions.filter((res) => {
        return (
          res.fieldName != "distributionFrameId" &&
          res.fieldName != "machineCabinet" &&
          res.fieldName != "distributionFrameType"
        );
      });
      if (this.queryParams.distributionFrameId) {
        this.searchFormOptions.push({
          fieldName: "distributionFrameId",
          condition: "like",
          val: this.queryParams.distributionFrameId,
          tableName: "配线模块ID",
          conditionName: "",
          textVal: this.queryParams.distributionFrameId,
        });
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == "distributionFrameId";
        });
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == "distributionFrameId") {
              this.searchFormOptions.splice(i, 1);
            }
          }
        }
      }
      if (this.queryParams.machineCabinet) {
        this.searchFormOptions.push({
          fieldName: "machineCabinet",
          condition: "eq",
          val: this.queryParams.machineCabinet,
          tableName: "所属机柜",
          conditionName: "",
          textVal: this.selectDictLabel(
            this.machineCabinetOptions,
            this.queryParams.machineCabinet
          ),
        });
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == "machineCabinet";
        });
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == "machineCabinet") {
              this.searchFormOptions.splice(i, 1);
            }
          }
        }
      }
      if (this.queryParams.distributionFrameType) {
        this.searchFormOptions.push({
          fieldName: "distributionFrameType",
          condition: "eq",
          val: this.queryParams.distributionFrameType,
          tableName: "配线模块类型",
          conditionName: "",
          textVal: this.selectDictLabel(
            this.frameTypeOptions,
            this.queryParams.distributionFrameType
          ),
        });
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == "distributionFrameType";
        });
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (
              this.searchFormOptions[i].fieldName == "distributionFrameType"
            ) {
              this.searchFormOptions.splice(i, 1);
            }
          }
        }
      }

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.fileList = [];
      this.open = true;
      this.title = "添加配线模块";
    },
    clearFiles() {
      this.fileList = [];
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.isChange = false; 
      const id = row.id || this.ids;
      getFrame(id).then((response) => {
        this.form = response.data;
        this.oldPortline = this.form.portLine 
        this.oldPortcolumn = this.form.portColumn
        this.open = true;
        this.title = "修改配线模块";
        if (this.form.fileList) {
          this.fileList = JSON.parse(this.form.fileList);
        } else {
          this.fileList = [];
        }
      });
    },
   
    /** 提交按钮 */
    submitForm() {
      this.form.fileList = JSON.stringify(this.fileList);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            let sf = this.form;
            sf.updateFlag = 1;
            updateFrame(sf).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.dialogShow = false;
              this.getList();
            });
          } else {
            let sf = this.form;
            sf.updateFlag = 1;
            addFrame(sf).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = this.form.id;
      this.$confirm(
        '是否删除配线模块ID为"' + this.form.distributionFrameId + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delFrame(ids);
        })
        .then(() => {
          this.cancel();
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有配线模块数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportFrame(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "配线模块数据导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传
    imgUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5;
      if (!isRightSize) {
        this.$message.error("文件大小超过 5MB");
      }
      return isRightSize;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    imgFileSuccess(e) {
      this.fileList.push({
        name: "",
        url: process.env.VUE_APP_BASE_API + e.fileName,
      });
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped lang="scss">
.colStyle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.searchBox {
  min-width: 50px;
  height: 28px;
  margin-top: 6px;
  border-radius: 14px;
  display: flex;
  font-size: 13px;
  background: #d7d7d7;
  line-height: 28px;
  margin-left: 6px;
  .text {
    padding-left: 14px;
    padding-right: 7px;
  }
  .icon {
    padding-right: 5px;
    display: flex;
    align-items: center;
    i {
      font-size: 20px;
      color: red;
    }
  }
}

.name {
  display: flex;
  flex-direction: column;
}
.title {
  color: #333;
  font-size: 14px;
}
.detail {
  display: flex;
  color: #7f7f7f;
  font-size: 12px;
}
.ml20 {
  margin-left: 20px;
}
.h28 {
  height: 28px;
  margin-top: 3px;
}
.resNum {
  margin-top: 2px;
  font-size: 14px;
}
</style>
